<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import { onMounted } from 'vue';
// import { Icon } from 'vant';

const active: Ref<number> = ref(0)
const active2: Ref<number> = ref(0) 
</script>
<template>
    <div class="box">
        <header>
            <van-search shape="round" placeholder="搜索商品">
                <template #left>
                    <van-icon name="wap-home-o" size="20" @click="$router.back()" />
                </template>
            </van-search>

        </header>
        <div class="content">
            <div class="left">
                <van-sidebar v-model="active">
                    <van-sidebar-item title="家用家电" />
                    <van-sidebar-item title="推荐分类" />
                    <van-sidebar-item title="手机电脑" />
                    <van-sidebar-item title="手机电脑" />
                    <van-sidebar-item title="手机电脑" />
                    <van-sidebar-item title="手机电脑" />
                    <van-sidebar-item title="手机电脑" />
                    <van-sidebar-item title="手机电脑" />


                </van-sidebar>
            </div>
            <div class="right">
                <p>男装</p>
                <van-grid :column-num="3">
                    <van-grid-item v-for="value in 48" :key="value" icon="photo-o" text="文字"
                        @click="$router.push('/fenlei/kindpro')" />
                </van-grid>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
header {
    height: 0.44rem;

    .van-icon {
        margin-right: 10px;
    }
}

.content {
    display: flex;

}

.left {
    width: 25%;
    height: 100%;
    overflow: auto;
}

.right {
    width: 75%;
    height: 100%;
    overflow: auto;

    p {
        text-align: center;
        font-size: 20px;
        height: 100px;
        line-height: 100px;
        background-color: aqua;
    }
}
</style>